<template>
	<view style="width: 690rpx;margin-left: 30rpx;">
		<u-form :model="form" ref="uForm" label-width='140'>
		<!-- 	<u-form-item label="卡类型" prop="thirdId">
				<u-input v-model="productName" type="select" placeholder='请选择卡种类型' @click="showCardType = true" />
			</u-form-item> -->
			<u-form-item label="卡号" prop="cardNum">
				<u-input v-model="form.cardNum" placeholder='请输入卡号' />
			</u-form-item>
			<u-form-item label="激活码" prop="activeCode" v-if="isActiveCode">
				<u-input v-model="form.activeCode" placeholder='请输入激活码' />
			</u-form-item>
			<u-form-item label="绑定人" prop="bindType">
				<u-radio-group v-model="form.bindType" @change="radioChange">
					<u-radio shape="circle" name='SELF'>本人</u-radio>
					<u-radio shape="circle" name='RELATION'>亲友</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label="姓名" prop="userName">
				<u-input v-model="form.userName" placeholder='请输入姓名' />
			</u-form-item>
			<u-form-item label="手机号码" prop="mobile">
				<u-input v-model="form.mobile" placeholder='请输入手机号码' :disabled="form.bindType=='SELF'" />
			</u-form-item>

			<u-form-item :label-position="labelPosition" label="验证码" prop="smsCode" label-width="150"
				v-if="form.bindType=='RELATION'">
				<u-input :border="border" placeholder="请输入验证码" v-model="form.smsCode" type="text"></u-input>
				<u-button slot="right" type="success" size="mini" @click="getCode">{{codeTips}}</u-button>
			</u-form-item>

			<u-form-item label="证件类型" prop="idType">
				<u-input v-model="idTypeName" placeholder='请选择证件类型' type="select" @click="idTypeShow()" />
			</u-form-item>

			<u-form-item label="证件号码" prop="idNo">
				<u-input v-model="form.idNo" placeholder='请输入证件号码' />
			</u-form-item>

			<u-form-item label="人脸照片" v-if="false">
				<image :src="form.img" style="width: 148rpx;height: 148rpx;" @click="chooseImage()" v-if="form.img">
				</image>
				<image :src="rlImage" style="width: 148rpx;height: 148rpx;" @click="chooseImage()" v-else>
				</image>
				<!-- <u-upload :header='header' :action="action" @on-success='success' upload-text='上传头像'></u-upload> -->
			</u-form-item>
		</u-form>
		<u-button throttle-time='3000' shape="square" @click="submit" type="primary"
			:custom-style="times?{}:customStyle">提交</u-button>
		<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
		<u-action-sheet :list="actionSheetList" v-model="show" @click="actionSheetCallback"></u-action-sheet>
		<u-select v-model="showCardType" :list="cardTypeList" label-name='name' value-name='thirdId'
			@confirm='confirmCardType()'></u-select>
		<view style="color: rgba(61, 61, 61, 0.5);font-size: 26rpx;line-height: 68rpx;">温馨提示：</br>
			1、代家人绑定旅游卡，请填写被绑人的身份信息。</view>
		<u-popup v-model="show1" mode="center" width='246' height='170' border-radius='16' :mask='true'>
			<view
				style="display: flex;flex-direction: column;align-items: center;width: 100%;height: 100%;justify-content: center;">
				<u-icon name="checkmark-circle-fill" style="color: #3278E7;font-size: 80rpx;"></u-icon>
				绑卡成功
			</view>
		</u-popup>
	</view>
</template>

<script>
	var that = ''
	import {
		idType
	} from '../../unit/utils.js'
	export default {

		data() {
			return {
				rlImage: 'https://aliyunoss.hntgov.net/h5/opion_add.png',
				idTypeName: '身份证',
				productName: '',
				times: true,
				customStyle: {
					backgroundColor: '#999'
				},
				form: {
					"channel": '',
					"thirdId": "",
					"cardNum": "", //卡号
					"activeCode": "", //激活码
					"bindType": "SELF", //绑定人类型
					"userName": "", //名字
					"mobile": "", //手机号码
					"smsCode": "", //短信验证码
					"idNo": "", //身份证号码
					"img": "", //照片
					"idType": "1", 
					"bindSource":"zfb"
				},
				show1: false,
				header: {
					Authorization: 'Bearer ' + uni.getStorageSync('token')
				},
				action: 'http://dscp-dev.hn12301.net/h5-api/oss/upload',
				show: false,
				showCardType: false,
				actionSheetList: [],
				codeTips: '',
				border: false,
				labelPosition: 'left',
				cardTypeList: [],
				rules: {
					userName: [{
							required: true,
							message: '请输入姓名',
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.isMixed(value)
							},
							message: '姓名不正确',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change', 'blur'],
						}
					],
					cardNum: [{
						required: true,
						message: '请输入卡号',
						trigger: ['change', 'blur'],
					}],
					activeCode: [{
						required: true,
						message: '请输入激活码',
						trigger: ['change', 'blur'],
					}],
					mobile: [{
						required: true,
						message: '请输入手机号码',
						trigger: ['change', 'blur'],
					}],
					smsCode: [{
						required: true,
						message: '请输入验证码',
						trigger: ['change', 'blur'],
					}],
					img: [{
						required: true,
						message: '请上传头像',
						trigger: ['change', 'blur'],
					}],
					idNo: [{
							required: true,
							message: '请输入证件号码',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								if (this.form.idType == '1') {
									return this.$u.test.idCard(value)
								} else {
									return true
								}
							},
							message: '证件号码不正确',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change', 'blur'],
						}
					],
					idType: [{
						required: true,
						message: '请选择证件类型',
						trigger: ['change', 'blur'],
					}],
					thirdId: [{
						required: true,
						message: '请选择卡种类型',
						trigger: ['change', 'blur'],
					}],
					id: ''
				},
				isFace: false,
				isActiveCode: false,
				current: 0
			};
		},
		onLoad(e) {
			that = this
			if(e.typeId){
				this.form.thirdId=e.typeId
				this.form.cardNum=e.cardNo
				this.productName=e.modelName
				this.form.channel=e.channel
			}
			this.listCardTypeMethod()
			
			this.actionSheetList = idType.map((item, index) => {
				return {
					text: item.label,
					value: item.value
				}
			})
		},
		onShow(){
			if(!uni.getStorageSync('phone')){
				uni.navigateTo({
					url:'/pages/index/authorization'
				})
			}else{
				this.form.mobile = uni.getStorageSync('phone')
			}
			
		},
		methods: {
			confirmCardType(e) {
				this.productName = e[0].label
				this.form.thirdId = e[0].value

				let array = this.cardTypeList.filter((item, index) => {
					return item.thirdId == e[0].value
				})
				this.isFace = array[0].isFace
				this.isActiveCode = array[0].isActiveCode
				this.form.channel = array[0].channel

				if (this.form.thirdId == '1') {
					this.idTypeName = '身份证'
					this.form.identityNo = '1'
				}
			},
			isMixed(str) {
			 return /^[a-zA-Z\u4e00-\u9fa5]+([ ·][a-zA-Z\u4e00-\u9fa5]+)*$/.test(str);
			},
			idTypeShow() {
				if (this.form.thirdId != '1') this.show = true
			},
			listCardTypeMethod() {
				this.$u.api.listCardType({
					"saleChannel": 'zfb'
				}).then(res => {
					this.cardTypeList = res.data

				})
			},
			chooseImage() {
				uni.chooseMedia({
					count: 1, //默认9
					mediaType: ['image'],
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera', 'album'], //从相册选择
					camera: 'front',
					success: function(res) {
						console.log(res.tempFiles[0].tempFilePath);
						uni.uploadFile({
							url: 'https://dscp-dev.hn12301.net/open-api/oss/upload',
							filePath: res.tempFiles[0].tempFilePath,
							name: 'file',
							success: (uploadFileRes) => {
								console.log(uploadFileRes);
								that.form.img = JSON.parse(uploadFileRes.data).data.fileUrl
							}
						});
					}
				});
			},





			actionSheetCallback(index) {
				this.form.idType = this.actionSheetList[index].value

				this.idTypeName = this.actionSheetList[index].text
				console.log(this.idTypeName);
			},
			radioChange(e) {
				if (e == 'SELF') {
					this.form.mobile = uni.getStorageSync('phone')
				} else {
					this.form.mobile = ''
				}
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码',
						mask: true
					})
					this.$u.api.sendCardBindVerifyCode({
						phone: this.form.mobile
					}).then(res => {
						this.$refs.uCode.start();
					})

				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			codeChange(text) {
				this.codeTips = text;
			},
			success(e) {
				this.form.photo = e.data.fileUrl
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid && that.times) {
						that.times = false
						this.$u.api.postBind(this.form).then(res => {
							if (res) {
								this.show1 = true
								setTimeout(() => {
									that.times = true
									uni.setStorageSync('isBind', 1)
									uni.switchTab({
										url: '/pages/index/ticket'
									})
								}, 3000)
							} else {
								that.times = true
							}

						})
					}
				});
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			uni.setNavigationBarTitle({
				title: '旅游卡绑定'
			})
			console.log(this.$refs.uForm);
			this.$refs.uForm.setRules(this.rules);
		}
	};
</script>